<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() +
            "://"
            + request.getServerName() + ":"
            + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

    <script type="text/javascript">

        $(function (){
            pageList(1,5);

        })

        function pageList(pageNo, pageSize) {
            $.ajax({
                url: "workbench/student/practice/getExaminationList.do",
                data: {
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    "stuId":${user.stuId},
                    "finished":"1"
                },
                dataType: "json",
                type: "get",
                success:function (data){
                    var html="";
                    if(data.dataList==null){
                        return false;
                    }
                    $.each(data.dataList,function (i,n){
                        html+=' <tr class="active">',
                            html+=' <td></td>',
                            html+=' <td>'+n.eName+'</td>',
                            html+=' <td>'+n.teacherId+'</td>',
                            html+='<td>'+n.startTime+'</td>',
                            html+='<td>'+n.endTime+'</td>',
                            html+='<td><span class="glyphicon glyphicon-tasks"></span> <a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/student/practice/detail.do?stuId=${user.stuId}&eid='+n.eid+'\'">查看答题情况</a></td>',
                            html+='</tr>'
                    })
                    $("#finishedBody").html(html);
                    var totalPages=Math.ceil(data.total/pageSize);
                    $("#finishedPage").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.total, // 总记录条数

                        visiblePageLinks: 5, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        /*该回调函数是在点击分页组件时候触发的*/
                        onChangePage : function(event, data){
                            pageList(data.currentPage , data.rowsPerPage);
                        }
                    });

                }
            })
        }
    </script>
</head>
<body>
<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>已完成试卷列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
            </form>
        </div>

        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td></td>
                    <td>试卷名称</td>
                    <td>发布老师</td>
                    <td>开始日期</td>
                    <td>截止日期</td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作</td>
                </tr>
                </thead>
                <tbody id="finishedBody">

                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">

            <div id="finishedPage"></div>

        </div>

    </div>

</div>
</body>
</html>
</body>
</html>